<!DOCTYPE HTML>
<html  lang="zh" xmlns:th="http://www.thymeleaf.org">
<meta charset="utf-8">
<head th:include="include :: header"></head>
<body class="white-bg">
    <!-- 图表展示 -->
    <div  >
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">

                    <div class="row" >
                        <div class="col-md-8">
                            <div id="pressureGraph" style="width: 100%;height:500px; float: left"></div>

                        </div>

                        <div class="col-md-4">
                            <form class="form-group" >

                                <div class="form-group">
                                    <label class="col-sm-12 control-label">总线程数：    [[${testCase.threadsNum}]]</label>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-12 control-label">延迟时间：  [[${testCase.threadsDelay}]]s</label>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-12 control-label">起始线程： [[${testCase.startUserCount}]]</label>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-12 control-label">每次增加： [[${testCase.startUserBurst}]]</label>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-12 control-label">运行时间（每次增加）： [[${testCase.startUserPeriod}]]s</label>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-12 control-label">每次停止：[[${testCase.stopUserCount}]]</label>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-12 control-label">运行时间（每次减少）：[[${testCase.stopUserPeriod}]]s</label>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-12 control-label">压测时长：[[${testCase.flightTime}]]s</label>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-12 control-label">启动时间：[[${testCase.rampUp}]]s</label>
                                </div>
                            </form>
                        </div>

                    </div>
                </div>

            </div>
        </div>
    </div>


    <div th:include="include::footer"></div>
    <script th:src="@{/js/echarts.min.js}"></script>
    <script th:src="@{/js/jmeter/dashboard-commons.js}"></script>

    <script type="text/javascript">
        let prefix = ctx + "jmeter/jmeterTestCase";
        let ajaxPrefix = prefix+'/getById'+'?caseId='+'[[${testCase.id}]]';

       // 基于准备好的dom，初始化echarts实例
       let pressureGraphChart = echarts.init(document.getElementById('pressureGraph'));

       $.get(ajaxPrefix).done(function (result) {
           pressureGraphChart.hideLoading();

            let option = {
                title: {
                    text: "Expected active users count",
                    textStyle: {
                        fontSize: 20,
                        fontStyle: "italic",
                        fontWeight: "lighter",
                        fontFamily: "monospace",
                        color: "rgba(73, 127, 177, 1)"
                    }
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        crossStyle: {
                            color: '#999'
                        }
                    }
                },
                toolbox: {
                    feature: {
                        dataView: {show: true, readOnly: false},
                        restore: {show: true},
                        saveAsImage: {show: true}
                    }
                },
               xAxis: {
                   type: 'time',
                   axisLabel: {
                       formatter: (function(value){
                          return formatDuration(value);
                       })
                   }
               },
               yAxis: {
                   type: 'value',
                   max: function (value) {
                       return value.max*2;
                   }
               },
               series: [{
                   step:'end',
                   data: result.points,
                   type: 'line',
                   name: '压力'
               }]
           };

           pressureGraphChart.setOption(option);
           window.onresize = function() {
               pressureGraphChart.resize();
           };
    	});
    </script>
</body>
</html>
